import React, { useRef, useEffect, useState, useLayoutEffect } from "react";
import { Image, Button, Modal, Space, Dropdown, Menu } from "antd";
import PurchaseOrderModal from "./component/PurchaseOrderModal";
import LockInModal from "./component/LockInModal";
import { SearchCheckboxTable } from "@/views/components/SearchTable/index";
import { useTableConfig } from "@/views/components/SearchTable/hooks/useTableConfig";
import ActionExportExcelModal from "./component/ActionExportExcelModal"; // 导出弹窗
import { getFmcgpurchasesList, getFmcgpurchasesCountList } from "./service";
import CommonTableSort from "@/views/components/CommonTableSort";
import { Input, Select, BatchSuffixInput } from "@/views/components/PrefixPlaceholder";

const AggregateStock = () => {
	const [visible, setVisible] = useState(0);
	const [record, setRecord] = useState(0);
	// 排序相关
	const refDefectiveNumSort = useRef();
	const refActualNumSort = useRef();
	const refTotalNumSort = useRef();
	const refWayNumSort = useRef();

	const tableRequest = getFmcgpurchasesList;

	const defaultColumns = [
		{
			name: "序号",
			code: "index",
			lock: true,
			render: (t, r, i) => {
				return i + 1;
			},
			width: 60
		},
		{
			name: "商品图",
			code: "skuImage",
			render: (value, record, i) => {
				return <Image width={60} src={record.skuImage ? record.skuImage : record.spuImage ? record.spuImage : ""} />;
			},
			width: 200
		},
		{
			name: "商品名称",
			code: "skuName",
			search: {
				order: 1,
				content: () => <Input allowClear placeholder="商品名称" />
			},
			width: 200
		},
		{
			name: "商品编码",
			code: "skuCode",
			search: {
				order: 2,
				content: () => <Input allowClear placeholder="商品编码" />
			},
			width: 200
		},
		{
			name: "编码款式",
			code: "spuCode",
			search: {
				order: 3,
				content: () => <Input allowClear placeholder="编码款式" />
			},
			width: 200
		},
		{
			name: "颜色规格",
			code: "skuSpec",
			search: {
				order: 4,
				content: () => <Input allowClear placeholder="颜色规格" />
			},
			width: 200
		},

		{
			name: "正品实际库存",
			title: () => (
				<CommonTableSort
					value={refActualNumSort}
					title={"正品实际库存"}
					onClick={order => {
						refDefectiveNumSort.current = null;
						refTotalNumSort.current = null;
						refActualNumSort.current = order;
						refWayNumSort.current = null;
						fetchPage();
					}}
				/>
			),
			code: "actualNum",
			width: 200,
			render: text => <span>{text}</span>
		},
		{
			name: "低预警值",
			code: "lowWarnValue",
			width: 200,
			search: {
				order: 5,
				code: "warnType",
				content: () => (
					<Select
						allowClear
						placeholder="预警"
						options={[
							{
								value: 0,
								label: "预警"
							},
							{
								value: 1,
								label: "红色预警"
							},
							{
								value: 2,
								label: "黄色预警"
							}
						]}
					/>
				)
			}
		},
		{
			name: "高预警值",
			code: "highWarnValue",
			width: 200
		},
		{
			name: "正品可售数",
			code: "saleableNum",
			width: 200
		},
		{
			name: "销售锁定数",
			code: "lockedNum",
			render: (text, record) => (
				<span className="opera-span-common">
					<span className="common-color2" onClick={() => commonHandleClick(2, record)}>
						{text}
					</span>
				</span>
			),
			width: 200
		},
		{
			name: "次品实际库存",
			// title: () => (
			// 	<CommonTableSort
			// 		value={refDefectiveNumSort}
			// 		title={"次品实际库存"}
			// 		onClick={order => {
			// 			refDefectiveNumSort.current = order;
			// 			refTotalNumSort.current = null;
			// 			refActualNumSort.current = null;
			// 			refWayNumSort.current = null;
			// 			fetchPage();
			// 		}}
			// 	/>
			// ),
			code: "defectiveNum",
			width: 200
		},

		{
			name: "总库存",
			title: () => (
				<CommonTableSort
					value={refTotalNumSort}
					title={"总库存"}
					onClick={order => {
						refDefectiveNumSort.current = null;
						refTotalNumSort.current = order;
						refActualNumSort.current = null;
						refWayNumSort.current = null;
						fetchPage();
					}}
				/>
			),
			code: "totalNum",
			// features: { sortable: function () {} },
			width: 200
		},
		{
			name: "采购在途库存",
			title: () => (
				<CommonTableSort
					value={refWayNumSort}
					title={"采购在途库存"}
					onClick={order => {
						refDefectiveNumSort.current = null;
						refActualNumSort.current = null;
						refTotalNumSort.current = null;
						refWayNumSort.current = order;
						fetchPage();
					}}
				/>
			),
			code: "wayNum",
			// features: { sortable: function () {} },
			width: 200
		}
	];

	const [columns, setColumns] = useState(defaultColumns);

	const sortProps = {
		mode: "single",
		onChangeSorts: sortItem => {},

		// 如果只想使用 sort 提供的交互与 UI，但不想让 sort 改变 dataSource，可以设置keepDataSource = true
		keepDataSource: true
	};
	const beforeQuerySearch = ({ API_DATA }) => {
		API_DATA["wayNumSort"] = refWayNumSort?.current || null;
		API_DATA["totalNumSort"] = refTotalNumSort?.current || null;
		API_DATA["actualNumSort"] = refActualNumSort?.current || null;

		return API_DATA;
	};
	const tableKey = "AggregateStock23131";
	const rowKey = "id";
	const {
		selectedKeys,
		selectedRows,
		fetchList,
		dataSource,
		query,
		form,
		pagination,
		updateDataSource,
		updateSearchQuery,
		updatePaginationParams,
		searchSimpleTableProps
	} = useTableConfig({
		tableKey,
		rowKey,
		columns,
		tableRequest,
		autoFetch: true,
		hasPagination: true,
		hasQuickSearch: true,
		beforeQuerySearch,
		sortProps,
		columnResize: true,
		resetSourceData: false,
		hasColsSetting: true
	});
	function fetchPage() {
		const DATA = form.getFieldValue();
		fetchList(DATA);
	}
	const CheckStockAndNoteProps = {
		visible,
		query,
		selectedRows,
		selectedKeys,
		record,
		fetchList,
		dataSource,
		handleOk() {},
		handleCancel() {
			setVisible(0);
		}
	};

	const exportExcel = () => {
		setVisible("ProgressModal");
	};

	const commonHandleClick = (status, record) => {
		if (status === 6 || status === 2) {
			setVisible(status);
			setRecord(record);
		} else {
			if (selectedRows.length || record) {
				setVisible(status);
			} else {
				Modal.info({ centered: true, content: "请先勾选商品进行操作" });
			}
		}
	};
	const leftBtns = (
		<Space>
			<Button style={{ marginRight: "8px" }} onClick={() => commonHandleClick(1)}>
				设置预警值
			</Button>
			<Button style={{ marginRight: "8px" }} onClick={() => exportExcel()}>
				表格导出
			</Button>
		</Space>
	);
	const searchData = form.getFieldsValue();
	const realProps = {
		createTaskData: {
			businessParam: JSON.stringify({
				skuCode: searchData.skuCode,
				skuName: searchData.skuName,
				skuSpec: searchData.skuSpec,
				spuCode: searchData.spuCode,
				warnType: searchData.warnType,
				current: pagination.current, // 当前页
				size: pagination.pageSize, // 每页的数量
				businessKey: 3
			}),
			taskType: 4002
		},
		onCancel() {
			setVisible("");
		}
	};

	return (
		<div className="views-container">
			<SearchCheckboxTable key={tableKey} leftBtns={leftBtns} {...searchSimpleTableProps} />;
			{visible == 1 && <PurchaseOrderModal {...CheckStockAndNoteProps} />}
			{visible == 2 && <LockInModal {...CheckStockAndNoteProps} />}
			{visible == "ProgressModal" && <ActionExportExcelModal {...realProps} />}
		</div>
	);
};

export default React.memo(AggregateStock, () => {
	return true;
});
